<template>
  <div class="dialog"
       v-show="showMask">
    <div class="dialog-container">
      <div class="dialog-title">{{title}}</div>
      <div class="content"
           style="font-size: .1625rem;">
        <table class="one"
               v-for="(item,index) in content" :key="index">
          <tr>
            <td>{{item.bank_name}} ({{item.account_number}})<p style="font-size: .15rem;">{{item.account_name}}</p>
            </td>
            <td>
              <div class="CardUser"
                   id="CardUser"
                   v-on:click="choosecard($event, item)"></div>
            </td>
          </tr>
        </table>
      </div>
      <div class="btns">
        <div class="adduser"
             @click="$router.push('/myaddCard')">
          <p>添加银行卡<i class="add-icon"></i></p>
        </div>
      </div>
      <div class="close-btn"
           @click="closeMask">
        <i class="iconfont close-icon"></i>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {},
    content: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    },
    title: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      showMask: false
    }
  },
  methods: {
    closeMask () {
      this.showMask = false
    },
    choosecard: function (e, val) {
      if (e.target.className.indexOf('detail-selected') === -1) {
        e.target.className = 'CardUser detail-selected'// 切换按钮样式
        this.$emit('child-say', [val.account_type, val.account_name, val.account_number, val.bank_name])
      } else {
        e.target.className = 'CardUser' // 切换按钮样式
      }
    }
  },
  mounted () {
    this.showMask = this.value
  },
  watch: {
    value (newVal, oldVal) {
      this.showMask = newVal
    },
    showMask (val) {
      this.$emit('input', val)
    }
  }
}
</script>
<style lang="less" scoped>
.dialog {
  // font-size: .25rem;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  .dialog-container {
    width: 6.7125rem;
    height: 8.1625rem;
    background: #ffffff;
    /*position: absolute;*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: .25rem;
    position: relative;
    .dialog-title {
      width: 100%;
      height: .75rem;
      font-size: .375rem;
      color: rgba(0, 0, 0, 1);
      font-weight: 400;
      font-family: MicrosoftYaHei;
      padding-top: 3%;
      box-sizing: border-box;
      border-bottom: .0125rem solid #c5c5c5;
    }
    .content {
      color: #797979;
      line-height: .325rem;
      padding: 0 .25rem;
      box-sizing: border-box;
      .one {
        width: 100%;
        text-align: left;
        tr {
          line-height: .75rem;
          border-bottom: .0125rem solid #c5c5c5;
          td {
            padding-right: .25rem;
            // font-size: .25rem;
            color: #000;
            font-family: MicrosoftYaHei;
          }
        }
      }
      .CardUser {
        width: .425rem;
        height: .425rem;
        background: url(http://img.zanjl.com/Content/img/image/gray-icon@2x.png) no-repeat;
        background-size: 100%;
        float: right;
        margin: 3%;
      }
      .detail-selected {
        background: url(http://img.zanjl.com/Content/img/image/redgou@2x.png) no-repeat;
        background-size: 100%;
      }
    }
    .btns {
      width: 100%;
      height: .75rem;
      // line-height: .75rem;
      position: absolute;
      bottom: 0;
      left: 0;
      text-align: right;
      padding: 0 .2rem;
      box-sizing: border-box;
      .adduser {
        width: 5.075rem;
        height: .7375rem;
        border: .0125rem dashed rgba(197, 197, 197, 1);
        text-align: center;
        margin: -5% auto;
        p {
          color: #c5c5c5;
          font-size: .375rem;
          font-family: MicrosoftYaHei;
          font-weight: 400;
          padding-right: .125rem;
        }
      }
    }
    .close-btn {
      position: absolute;
      top: .2rem;
      right: .2rem;
      width: .375rem;
      height: .375rem;
      line-height: .375rem;
      text-align: center;
      font-size: .225rem;
      cursor: pointer;
      &:hover {
        font-weight: 600;
      }
    }
  }
}
</style>
